<template>
	<view class="main">
		<view class="bannerImg">
			<image :src="imgUrl + '/statics/js/modules/applet/img/mealOrderTop.png'" mode=""></image>
		</view>
		<!-- 盒饭 -->
		<view class="box-lunch">
			<view class="box-lunch-mian">
				<view class="radio">
					<radio-group @change="publicPhone4">
						<radio style="line-height: 70px;" value="4" :checked="type === '4'"></radio>
					</radio-group>
				<image :src="imgUrl + '/statics/js/modules/applet/img/bento.png'" mode=""></image>
				</view>
				<view class="box-lunch-right">
					<text>盒饭套餐</text>
					<view class="details">详情：一荤两素，有米饭馒头可选择</view>
					<view style="display: flex;">
						<view class="price">
							<view class="fu">¥</view>
							<view class="grey">{{totalPrice}}</view>
						</view>
						<view class="number">
							<uni-number-box @change="NumberBox" v-model="productQuantity" />
						</view>
					</view>
				</view>
			</view>
			<view class="way">
				<view :class="trackNum ==='1'?'delivery':'self-pickup'" @click="()=> trackNum='1'">自提</view>
				<view :class="trackNum ==='2'?'delivery':'self-pickup'" style="margin-left: 20px;"
					@click="()=> trackNum='2'">配送</view>
			</view>
			<view class="select" v-if="trackNum==='2'">
				<view style="display: flex;">
					<view class="name">展馆</view>
					<view class="content">
						<picker mode="selector" :range="list2" @change="onexhibition" placeholder="请填写">
							<view class="picker">
								<view v-if="!showroom" class="placeholder">请填写</view>
								<view v-else class="selected-value">{{showroom}}</view>
							</view>
						</picker>
					</view>
				</view>
				<view style="display: flex; margin-left: 10px;">
					<view class="name" style="width: 43px;">展位号</view>
					<view class="content">
						<input class="uni-input" focus placeholder="请填写展位号" v-model="deliveryAddress" />
					</view>
				</view>
			</view>
			<view class="select">
				<view style="display: flex;">
					<view class="name">时间</view>
					<view class="content">
						<picker mode="selector" :range="list" @change="onChange4" placeholder="请填写">
							<view class="picker">
								<view v-if="!mealTime" class="placeholder">请填写</view>
								<view v-else class="selected-value">{{mealTime}}</view>
							</view>
						</picker>
					</view>
				</view>
				<view style="display: flex; margin-left: 6px;">
					<view class="name">电话</view>
					<view class="content">
						<input class="uni-input" focus placeholder="请输入联系方式" v-model="userPhone" />
					</view>
				</view>
			</view>
			<view style="display: flex;  margin-top: 20px;">
				<view class="name">备注</view>
				<view class="content" style="margin-right: 6x;">
					<input class="notes" placeholder="请填写" v-model="remark" />
				</view>
			</view>
		</view>
		<view class="line"></view>
		<!--自助餐-->
		<view class="box-lunch">
			<view class="box-lunch-mian">
				<view class="radio">
					<radio-group @change="publicPhone5" style="margin-top: 20px;">
						<!-- 添加margin-top以便区分两个radio-group -->
						<radio style="line-height: 45px;" value="5" :checked="type === '5'"></radio>
					</radio-group>
				<image :src="imgUrl + '/statics/js/modules/applet/img/buffet.png'" mode=""></image>
				</view>
				<view class="box-lunch-right">
					<text>自助餐</text>
					<view class="details">详情：十几种菜品任意选择。</view>
					<view style="display: flex;">
						<view class="price">
							<view class="fu">¥</view>
							<view class="grey">{{totalPrice2}}</view>
						</view>
						<view class="number">
							<uni-number-box @change="NumberBox2" v-model="productQuantity2" />
						</view>
					</view>
				</view>
			</view>
			<view class="select">
				<view style="display: flex;">
					<view class="name">时间</view>
					<view class="content">
						<picker mode="selector" :range="list" @change="onChange5" placeholder="请填写">
							<view class="picker">
								<view v-if="!mealTimeT" class="placeholder">请填写</view>
								<view v-else class="selected-value">{{mealTimeT}}</view>
							</view>
						</picker>
					</view>
				</view>
				<view style="display: flex; margin-left: 10px;">
					<view class="name">电话</view>
					<view class="content">
						<input class="uni-input" focus placeholder="请输入联系方式" v-model="userPhoneT" />
					</view>
				</view>
			</view>
			<view style="display: flex;  margin-top: 20px;">
				<view class="name">备注</view>
				<view class="content" style="margin-right: 10px;">
					<input class="notes" placeholder="请填写" v-model="remarkT" />
				</view>
			</view>
		</view>
		<!--  -->
		<view class="line"></view>
		<!-- 用餐须知 -->
		<view class="foot">
			<view class="notice">
				<view class="dining-instructions">用餐须知:</view>
				<view class="notice-text">
					<view>1、进入餐厅禁止大声喧哗，按次序排队刷卡领餐。</view>
					<view>2、取饭菜时可提出减量，厉行节约，禁止浪费。</view>
					<view>3、就餐时，将食剩杂物集中放置，严禁随意乱扔。</view>
					<view>4、餐后桌面收拾干净，垃圾、剩饭分类导入垃圾桶，严禁乱扔乱倒</view>
				</view>
			</view>
			<view class="pay">
				<view class="myorder" style="display: flex;">
					<view class="">
					<image :src="imgUrl + '/statics/js/modules/applet/img/mealProfile.png'" mode=""></image>
					</view>
					<view class="myorder-text" @click="myorder">我的订单</view>
				</view>
				<view style="width: 70%; display: flex;margin-right: -55px;">
					<view class="amount">
						<view class="amount-to">合计：</view>
						<view class="fu" style="margin-top: 23rpx;">¥</view>
						<view class="grey">{{type === '4' ? totalPrice : type === '5' ? totalPrice2 : ''}}</view>
					</view>
					<view class="settlement" @click="handlepay">结算</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import indexApi from '@/utils/request/index.js';
	import banner from '@/api/banner.js';
	import request from '@/utils/request/index.js';
	import orderApi from '@/api/orderCenter.js';
	import commonApi from '@/utils/commonMethod.js';
	export default {
		data() {
			return {
				param: { // 初始化 param 对象，包含需要的参数
					page: 1,
					limit: 10,
				},
				list2: ['S1馆', 'S2馆', 'S3馆', 'S4馆', 'W1馆', 'W2馆', 'E1馆', 'E2馆', 'E3馆'],
				list: ['06-26 中午', '06-27 中午', '06-28 中午', '06-29 中午'],
				productQuantity: 1, //数量
				productQuantity2: 1, //数量
				totalPrice: 15,
				totalPrice2: 55,
				basePrice2: 55,
				basePrice: 15, // 固定的15部分
				dynamicPrice: 0, // 可变的数字部分，初始为0
				demandList: [], // 初始化 demandList 数组
				productId: null,
				type: '',
				showroom: '', //展馆
				deliveryAddress: '', //展位号
				remark: "", //备注
				remarkT: "", //备注
				userPhone: "", //电话
				userPhoneT: "",
				userName: "",
				productld: "", //产品id
				payAmount: "", //总价
				mealTime: "", //送餐时间
				mealTimeT: "",
				type: "", //4 盒饭 5 自助
				trackNum: "", //1自提 2派送
				remark: "", //备注
				imgUrl: indexApi.baseUrl,
			};
		},
		methods: {
			async handlepay() {
				const type = this.type;
				const userPhone = type === '4' ? this.userPhone : this.userPhoneT;
				const showroom = this.showroom;
				const deliveryAddress = this.deliveryAddress;
				const productQuantity = this.productQuantity;
				const payAmount = type === '4' ? this.totalPrice : this.totalPrice2;
				const mealTime = type === '4' ? this.mealTime : this.mealTimeT;
				const trackNum = this.trackNum;
				const remark = type === '4' ? this.remark : this.remarkT;

				let openid = "";
				let that = this;
				// 获取微信opined
				const currentPromise = await commonApi.currentUserAxios()
				that.currentUser = currentPromise.data.session_user_h5
				uni.login({
					provider: 'weixin', //使用微信登录获取code
					success: function(loginRes) {
						console.log(that.currentUser)
						//使用微信code获取openid
						commonApi.getOpenId(loginRes.code).then(res => {
							that.openid = res.data.openid;
							let userInfo = {
								id: that.currentUser.id,
								openId: that.openid
							}
							//下单支付接口
							orderApi.getpayList(productQuantity, userPhone, deliveryAddress,
								payAmount, mealTime, type, trackNum, remark, showroom).then(
								data => {
									this.demandList = data.data.list;
									console.log(this.demandList, 66666);
									const aobj1 = {
										id: data.data.nocOrder.id,
										orderNum: data.data.nocOrder.orderNum,
										payAmount: data.data.nocOrder.payAmount,
										tradeType: 'JSAPI',
										openid: that.openid
									}
									commonApi.getConfig().then((res) => {
										if (res.data.list[47].paramValue ==1) {
										}else{
										banner.OrderForActivity(aobj1).then(data => {
											//调起微信支付
											uni.requestPayment({
												provider: 'wxpay',
												timeStamp: data.data.payMap
													.timeStamp, // 时间戳（单位：秒）
												nonceStr: data.data.payMap
													.nonceStr, // 随机字符串
												package: data.data.payMap
													.package, // 统一下单接口返回的 prepay_id 参数值
												signType: data.data.payMap
													.signType, // 签名算法，应与后台下单时的值一致
												paySign: data.data.payMap
													.paySign, // 签名
												success(data) {
													//支付成功
													// 跳转到我的页面
													uni.switchTab({
														url: '/src/pages/person/myOrderlunch'
													})
												},
												fail(err) {
													//支付失败、用户取消支付
												}
											});
										})
										}
										
										
									})
									
								});
						})
					}
				});
			},
			// 点击15+
			NumberBox() {
				this.totalPrice = this.basePrice * this.productQuantity;
			},
			//点击 55
			NumberBox2() {
				this.totalPrice2 = this.basePrice2 * this.productQuantity2;
			},
			publicPhone4(e) {
				this.type = e.target.value;
				console.log('第一个radio-group选中的值:', this.type);
				// 在这里可以根据type的值执行其他逻辑
			},
			// 处理第二个radio-group变化的方法
			publicPhone5(e) {
				this.type = e.target.value;
				console.log('第二个radio-group选中的值:', this.type);
				// 在这里可以根据type的值执行其他逻辑
			},
			//时间
			onChange4(e) {
				this.mealTime = this.list[Number(e.detail.value)];
			},
			onChange5(e) {
				console.log(e);
				this.mealTimeT = this.list[Number(e.detail.value)];
			},
			//展馆
			onexhibition(e) {
				this.showroom = this.list2[Number(e.detail.value)];
			},
			myorder() {
				uni.navigateTo({
					url: '/pages/person/myOrderlunch'
				})
			}
			// mounted() {
			// 	// 可以在组件挂载后设置初始的总价格（如果需要的话）
			// 	this.totalPrice = this.basePrice * this.productQuantity;
			// },
		}

	}
</script>


<style lang="scss" scoped>
	::v-deep radio .wx-radio-input {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 1rpx solid #A1A0A0;
		background-color: white !important;
	}

	::v-deep radio .wx-radio-input.wx-radio-input-checked {
		width: 30rpx;
		height: 30rpx;
		background-color: white !important;
	}

	::v-deep radio .wx-radio-input.wx-radio-input-checked::before {
		width: 33rpx;
		height: 33rpx;
		border-radius: 50%;
		/* 对勾大小 30rpx */
		font-size: 24rpx;
		line-height: 33rpx;
		text-align: center;
		/* 对勾颜色 白色 */
		background: linear-gradient(180deg, #54D6D2 0%, #00AAA6 100%);
		transform: translate(-50%, -50%) scale(1);
	}
	.main{
		width: 100%;
		margin: 0 auto;
	}
	.radio {
		width: 40%;
		display: flex;
	}

	.bannerImg image {
		width: 100%;
		height: 200px;
	}

	.box-lunch {
		margin: 20px 20px 20px 20px;

	}

	.box-lunch image {
		width: 175rpx;
		height: 147rpx;
	}

	.box-lunch-mian {
		display: flex;
		margin-top: 20px;
	}

	.box-lunch-right {
		width: 50%;
	}

	.box-lunch-right text {
		width: 116rpx;
		height: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		font-size: 29rpx;
		color: #000000;
	}

	.details {
		width: 415rpx;
		height: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 24rpx;
		color: #666661;
	}

	.price {
		display: flex;
		height: 20px;
		padding-top: 5px;
		width: 40%;
	}

	.fu {
		font-weight: 600;
		margin-top: 30rpx;
		color: red;
		font-size: 28rpx;
	}

	.grey {
		font-weight: normal;
		font-size: 40rpx;
		color: red;
		font-weight: 600;
		margin-top: 18rpx;
	}

	.number {
		margin-top: 15px;
		margin-left: 60px;
	}

	.way {
		display: flex;
		margin-top: 20px;
	}

	.self-pickup {
		width: 146rpx;
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		background: #FFFFFF;
		border-radius: 27rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		font-size: 29rpx;
		color: #000000;
		border: 1px solid #00B7B3;
	}

	.delivery {
		width: 146rpx;
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		background: #00B7B3;
		border-radius: 27rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		font-size: 29rpx;
		color: #FFFFFF;
	}

	.select {
		display: flex;
		margin-top: 20px;
	}

	.content {
		position: relative;
	}

	.uni-input {
		width: 232rpx;
		height: 67rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 1px solid #00B7B3;
		padding-left: 10px;
		margin-right: 10px;
	}

	.name {
		width: 70rpx;
		height: 27rpx;
		line-height: 70rpx;
		font-family: Microsoft YaHei;
		font-weight: 600;
		font-size: 27rpx;
		color: #000000;
	}

	.notes {
		width: 580rpx;
		height: 67rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 1px solid #00B7B3;
		padding-left: 10px;
		margin-right: -17px;
	}

	.line {
		background-color: #F3F4F6;
		height: 21rpx;
	}

	.foot {
		height: 480rpx;
	}

	.notice {
		padding: 20rpx 20rpx 20rpx 20rpx;
		margin: 20px auto;
		width: 681rpx;
		height: 234rpx;
		background: #F3F4F6;
		border-radius: 8rpx;
	}

	.dining-instructions {
		width: 113rpx;
		height: 26rpx;
		font-family: Microsoft YaHei;
		font-weight: 600;
		font-size: 26rpx;
		color: #333331;
	}

	.notice-text {
		margin-top: 20rpx;
		font-family: Microsoft YaHei;
		font-weight: 300;
		font-size: 24rpx;
		color: #2D2D2D;
	}

	.myorder {
		text-align: center;
		width: 40%;
		margin-top: 10px;
	}

	.myorder image {
		width: 42rpx;
		height: 42rpx;
	}

	.myorder-text {
		width: 120rpx;
		height: 27rpx;
		font-family: Source Han Sans CN;
		font-weight: 5S00;
		font-size: 29rpx;
		color: #000000;
		margin-left: 10px;
	}

	.pay {
		text-align: center;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 20rpx 0rpx 20rpx;
	}

	.amount {
		width: 40%;
		display: flex;
		line-height: 20px;
	}

	.settlement {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 27rpx;
		color: #FFFFFF;
		width: 192rpx;
		height: 76rpx;
		line-height: 76rpx;
		text-align: center;
		background: linear-gradient(90deg, #F43B36, #FF7348);
		border-radius: 38rpx;
	}

	.amount-to {
		font-family: Microsoft YaHei;
		font-weight: 400;
		font-size: 29rpx;
		color: #333331;
		margin-top: 10px;
	}

	.picker {
		width: 212rpx;
		height: 28rpx;
		background: #FFFFFF;
		border-radius: 8rpx;
		border: 1px solid #00B7B3;
		padding: 10px;

	}
</style>